<!-- 登录 -->
<template>
  <!-- 登录容器 -->
  <div class="login-container">
    <!-- 视频标签:自动、循环、静音 -->
    <video
      src="@/assets/video.3cf57b17.mp4"
      autoplay
      loop
      muted
    />
    <el-form ref="form" class="loginForm" :model="formData" :rules="rules">
      <img src="@/assets/logo1.33ef7fa0.png" alt="logo" class="loginLogo">
      <el-form-item prop="account">
        <el-input v-model="formData.account" placeholder="账号" prefix-icon="el-icon-user-solid" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="formData.password" placeholder="密码" prefix-icon="el-icon-unlock" show-password autocomplete="off" type="password" />
      </el-form-item>
      <el-form-item class="code-input" prop="code">
        <!-- 验证码 -->
        <img alt="code" :src="proofDiagram" class="proofDiagram">
        <el-input v-model="formData.code" placeholder="验证码" prefix-icon="el-icon-s-claim" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="loginBtn" @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getVerificationAPI } from '@/api/user'
import { mapActions } from 'vuex'

export default {
  name: 'Login',
  data() {
    return {
      formData: {
        // 用户名
        account: 'shenlingadmin',
        // 密码
        password: '123456',
        // 验证码
        code: '',
        // 申请验证码key
        key: '1234'
      },
      // 验证码图片
      proofDiagram: '',
      // 表单校验
      rules: {
        // 用户名
        account: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        // 密码
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        // 验证码
        code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]

      }
    }
  },
  created() {
    this.verification()
  },
  methods: {
    // vuex存储token
    ...mapActions('user', ['loginAction']),
    // 登录
    async onSubmit() {
      try {
        this.$refs.form.validate()
        this.loginAction(this.formData)
        this.verification()
        // 重新获得图片
      } catch (error) {
        console.log('error  ----->  ', error)
      }
    },
    // 验证码图片
    async verification() {
      const res = await getVerificationAPI(this.formData.key)
      this.proofDiagram = URL.createObjectURL(res)
      // Blob + URL.createObjectURL 的方式将 png 图片的二进制数据转换为可展示的图片
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container{
  position: relative;
  overflow: hidden;
  height: 100vh;
  video{
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .loginForm{
    // 水平垂直居中
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 450px;
    height: 490px;
    padding: 36px 40px;
    background: #fff;
    text-align: center;
    border-radius: 10px;
    .loginLogo{
      height: 54px;
      margin-bottom: 28px;
    }
    ::v-deep .el-input__inner{
      width: 370px;
      height: 50px;
      padding-left: 48px;
      line-height: 50px;
    }
    ::v-deep .el-input__prefix .el-input__icon {
      padding-left: 10px;
      padding-top: 5px;
      font-size: 21px;
    }
    ::v-deep .el-input__icon {
      padding-top: 5px;
      font-size: 21px;
    }
    .loginBtn{
      width: 100%;
      height: 54px;
      margin-bottom: 14px;
      margin-top: 22px;
      background-color: #e15536;
      border: 0px;
      font-size: 18px;
      color: white;
      font-weight: bold;
    }
    //验证码输入框
    .code-input{
      position: relative;
      //验证码图片
      .proofDiagram{
        position: absolute;
        top: 10px;
        right: 10px;
        width: 71px;
        height: 32px;
        margin-left: 10px;
        z-index: 999;
        cursor: pointer;
      }
    }
  }
}
</style>
